<template>
  <div class="page-container">
    <van-tabs v-model="activeIndex" @click="handleChangeTask">
      <van-tab
        v-for="(task, index) in processItems"
        :key="index"
      >
        <template #title>
          <span>Task{{index+1}}&nbsp;</span>
          <van-icon v-if="task.status=='finish'" name="checked" color="green"/>
        </template>
      </van-tab>
    </van-tabs>
    <div>
      <van-divider><span style="font-size:9px">加工源</span></van-divider>
      <process-item :value="currentStock" />
    </div>
    <div v-if="currentStock.status=='process'">
      <van-divider><span style="font-size:9px">操作</span></van-divider>
      <van-cell-group>
        <van-cell
          label-width="20"
          size="large"
          v-for="option in currentOptions"
          :key="option.unit">
          <process-option-item @pack-click="handlePack" :value="option"/>
        </van-cell>
      </van-cell-group>
    </div>

    <div v-else class="result-container">
      <van-divider><span style="font-size:9px">加工结果</span></van-divider>
      <process-item
        style="margin-top:5px;"
        v-for=" stock in currentResult"
        :key="stock.id"
        :value="stock"
      />
    </div>
    <van-button type="primary" block class="btn-return" @click="handleBack">继续入库</van-button>
  </div>
</template>

<script>
import FlowButtons from '@/components/FlowButtons.vue'
import ProcessItem from './ProcessItem.vue'
import ProcessOptionItem from './ProcessOptionItem.vue'

export default {
  data() {
    return {
      scan: '',
      activeIndex: 0,
      processItems: [],
      currentStock: {},
      currentOptions: [],
      currentResult: []
    }
  },
  props: {
    propFlowKey: String
  },
  created() {
    this.loadProcessData()
  },
  computed: {
  },
  methods: {
    loadProcessData() {
      console.log(this.$route)
      const params = {
        workOrderId: this.$route.params.woId || ''
      }
      this.utils.loadShow()
      this.$ajax.get('/wm/stock/getProcessInfoByWoId', { params }).then(response => {
        this.utils.loadHide()
        if (response.success) {
          this.processItems = response.data.stocks || []
          this.processOptions = this.genOptions(response.data.options)
          this.handleChangeTask()
        }
      }).catch(err => {
        this.utils.loadHide()
      })
    },
    handleBack() {
      this.$store.commit('SET_WORKBENCH_ROUTE', { name: this.$route.params.parentRoute})
    },
    handleChangeTask() {
      if (this.processItems.length == 0) return
      this.$set(this, 'currentStock', this.processItems[this.activeIndex])
      if (!this.currentStock.status) {
        this.$set(this.currentStock, 'status', 'process')
      }
      this.$set(this, 'currentOptions', this.processOptions.filter(option => option.matrId == this.currentStock.matrId) || [])
      this.$set(this, 'currentResult', this.currentStock.result || [])
    },
    async handlePack(option) {
      const result = await this.$dialog.confirm({
        title: '警告',
        message: `确定要将 ${this.currentStock.packageUnit} 加工成 ${option.unit} ？`
      })
      if (!result) return
      const params = {
        stockId: this.currentStock.id,
        toUnit: option.unit,
        qty: option.processQty,
        serialRule: 'wm_stock_process_sn'
      }
      this.utils.loadShow()
      this.$ajax.post('/wm/stock/mobilePack', params).then(response => {
        this.utils.loadHide()
        if (response.success) {
          this.currentResult = response.data
          this.printSN(this.currentResult)
          this.$notify.success('加工操作完成！')
          this.$set(this.currentStock, 'status', 'finish')
          this.$set(this.currentStock, 'result', this.currentResult)
          this.processItems[this.activeIndex] = this.currentStock
        }
      }).catch(err => {
        this.utils.loadHide()
      })
    },
    printSN(data) {
      const params = {
        labelKey: 'sn',
        data
      }
      this.$ajax.post('/sys/printer/printLabel', params).then(res => {
        this.$notify.success('已推送打印标签')
      })
    },
    genOptions(options) {
      options.forEach(option => {
        const stock = this.processItems.find(item => item.matrId == option.matrId)
        option.processQty = Math.floor(stock.skuQty / option.rate)
        option.maxQty = Math.floor(stock.skuQty / option.rate)
      })
      return options || []
    }
  },
  components: {
    ProcessItem, ProcessOptionItem
  }

}
</script>

<style lang="scss" scoped>
  .btn-return {
    margin-top: 30px;
  }
</style>
